@import '../common.scss';

.image__content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.image--contain .image__content {
  object-fit: contain;
}

.image {
  overflow: hidden;
  width: 100%;
  position: relative;

  @include from($desktop) {
    width: 40%;
  }

  .image__container {
    height: 0;
    position: relative;
    width: 100%;
    padding-bottom: 89.0625%;
  }
}

.image--circle {
  border-radius: 50%;

  .image__content {
    background-color: var(--color-main);
  }
}

.image--square-big {
  width: 100%;

  .image__container {
    width: 100%;
    padding-bottom: 100%;
  }
}

.image--extra-small {
  width: 8%;

  .image__container {
    width: 100%;
    padding-bottom: 100%;
  }

  @include to($tablet) {
    width: calc(100% / 3 - 1rem);
  }
}

.image--small {
  width: 15%;

  .image__container {
    width: 100%;
    padding-bottom: 100%;
  }

  @include to($tablet) {
    width: calc(100% / 3 - 1rem);
  }
}

.image--medium {
  width: 50%;

  .image__container {
    width: 100%;
    padding-bottom: 71.25%;
  }
}

.image--large {
  width: 100%;

  @include from($desktop) {
    width: 60%;
  }

  .image__container {
    padding-bottom: 59.37%;
    width: 100%;
  }
}

.image--full-width {
  width: 100%;

  .image__container {
    padding-bottom: 59.37%;
    width: 100%;
  }
}

.image--actual-size {
  width: 100%;

  .image__container {
    height: 0;
    position: relative;
    width: 100%;
    padding-bottom: 60%;
  }
}

html[data-theme='dark'] {
  .image--backdrop {
    .image__container {
      background: $white;
      border-radius: 10px;
    }
  }

  .image--invert {
    img {
      filter: invert(1);
    }
  }
}
